<template>
	<scroll-view class='liveNotStart' >
		<div class="video" id="player" v-if="contents.detail.thumb.type == 'img'">
			<image :src="contents.detail.thumb.src" mode="aspectFill"></image>
		</div>
		<view v-else >
			<video
				v-if="contents.detail.thumb.src"
				id="myVideo" 
				:src="contents.detail.thumb.src"
				controls
				objectFit="cover"
				:poster="contents.thumb"
			></video> 
		</view>
		<view class="content">
			<view class="title"><text>{{contents.title1}}</text></view>
			<view class="desc">
				<text>{{contents.title2}}</text>
				<text>{{contents.shared>10000?'1w+':(contents.shared || 0)}} 分享</text>
			</view>
			<view class="desc">
				<text>时间：{{contents.date}}</text>
				<text>{{contents.read>10000?'1w+':(contents.read || 0)}} 阅读</text>
			</view>
			<view class="button" v-if="contents.detail.signup">
				<text>已报名</text>
				<text class='right'>已有{{contents.detail.signups || 0}}人</text>
			</view>
			<view class="button2" v-else @tap="livesignup">
				<text>立即报名</text>
				<text class='right' v-if="contents.detail.signups">已有{{contents.detail.signups}}人</text>
			</view>
			<view class="info" :id="'a'+item.desc._id" v-if="contents.detail.sections" v-for="item in contents.detail.sections" :key="item.desc._id">
				<view class='info_title' v-if="item.desc._id != 'remen'"><text>【{{item.name}}】</text></view>
				<rich-text :nodes="item.desc.text"></rich-text>
			</view>			 
		</view>
		<view id='aremen'></view>
		<Comments
			:ids="opt.id" 
			:contents="contents" 
			@refresh="getLiveContentDetail" 
			ref="Comments"
		></Comments>
		<view class="mulu">
			<view class="image" @tap="changePanShow">
				<image src="../../static/img/mulu.png" mode="widthFix"></image>
			</view>
			<view class='content' v-if="panShow">
				<view @tap='scrollTo("a"+item.desc._id)' v-if="contents.detail.sections" v-for="item in contents.detail.sections" :key="item.desc._id">
					<text class='active'>{{item.name.slice(0,4)}}</text>
				</view>
			</view>
		</view>
		<uni-share 
			:contents="contents" 
			:shareShow="shareShow" 
			@cancelshow="this.shareShow=false"
			@shareSuccessRefresh = "getLiveContentDetail"
		></uni-share>
	</scroll-view>
</template>

<script> 
	import uniShare from "@/components/uni-share.vue"
	import Comments from "@/components/comments.vue"
	import {
		getLiveContent,
		livesignup
	} from '@/utils/api' 
	export default {
		components: {uniShare,Comments},
		data() {
			return {
				shareShow:false,
				panShow:false,
				opt:{},
				contents:{ //详情内容
					detail:{
						thumb:{}
					}
				},
				scrollId:'',
				scrollheight:0
			}
		}, 
		methods: {
			async livesignup(){
				let data = await livesignup(this.contents._id)
				if(data.data.success){
					uni.showToast({
						icon: 'none',
						title: "报名成功",
						duration: 2000
					});
					this.getLiveContentDetail()
				}else{
					uni.showToast({
						icon: 'none',
						title: data.message,
						duration: 2000
					});
				}
			},
			//获取详情内容
			async getLiveContentDetail(){
				let data = await getLiveContent(this.opt)
				if(data.status == 0){
					this.contents = data.data
					this.contents.detail.sections.push({
						desc:{
							_id:'remen',
						},
						name:'热门评论'
					})
				}
			},
			changePanShow(){
				this.panShow = !this.panShow
			},
			scrollTo(id){ 
				const query = uni.createSelectorQuery()
				let scrollTop = 0
				query.selectViewport().scrollOffset(res => {
				  console.log("竖直滚动位置：" + res.scrollTop);
				  scrollTop = res.scrollTop
				}).exec();
				
				query.select('#'+id).boundingClientRect((res)=>{
					console.log('元素顶部距离：'+res.top)
					uni.pageScrollTo({
						duration:0,
						scrollTop:scrollTop + res.top
					}) 
				}).exec(); 
			}
		}, 
		onLoad(opt){
			this.opt = opt
			this.getLiveContentDetail()
		},
		onNavigationBarButtonTap(e){
			if(e.key=='share'){
				this.shareShow = true
			}
		},
		onReachBottom(){
			console.log('到达底部')
			clearTimeout(this.listTimer)
			this.listTimer = setTimeout(()=>{
				uni.$emit('reachBottom')
			},300)
		}
	}
</script>

<style lang="scss">
	.liveNotStart{
		padding-bottom: 130upx;
		.mulu{
			position: fixed;
			right: 20upx;
			bottom: 500upx;
			width: 80upx;
			height: 100upx;
			.image{
				position: absolute;
				width: 50upx;
				height: 40upx;
				right: 0;
				padding: 12upx;
				border-radius: 4upx;
				border:1px solid rgba(194,162,237,1);
				background: #fff;
				image{
					width: 100%;
				}
			}
			.content{
				background:rgba(255,255,255,1);
				border:1px solid rgba(194,162,237,1);
				box-shadow:0px 0px 10upx 0px rgba(194,162,237,0.25);
				border-radius:4upx;
				position: absolute;
				width: 100upx;
				// height: 80upx;
				right: 0;
				top: 66upx;
				padding: 0upx 10px;
				text{
					font-size:24upx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(153,153,153,1);
					line-height:56upx;
					&.active{
						font-size:24upx;
						font-family:PingFang SC;
						font-weight:bold;
						color:rgba(173,133,252,1);
					}
				}
			}
		}
		.video{
			width: 100%;
			height: 422upx;
			// background:red;
			image{
				width: 100%;
				height: 100%;
			}
		}
		#myVideo{
			width: 100%;
			// height: 340upx;
		}
		.content{
			padding: 36upx 32upx;
			.title{
				margin-bottom: 30upx;
				text{
					font-size:34upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
			}
			.desc{
				margin-bottom: 15upx;
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
				line-height:36upx;
				display: flex;
				justify-content: space-between;
			}
			.button2{
				width: 100%;
				height: 88upx;
				background:linear-gradient(90deg,rgba(131,175,238,1) 0%,rgba(168,127,251,1) 100%);
				text-align:center;
				position:relative;
				border-radius: 10upx;
				margin:36upx 0;
				text{
					line-height: 88upx;
					font-size:34upx;
					font-family:PingFang SC;
					font-weight:500;
					color:#fff;
				}
				.right{
					position: absolute;
					right: 20upx;
					font-size:34upx;
					font-family:PingFang SC;
					font-weight:400;
					color:#fff;
				}
			}
			.button{
				width: 100%;
				height: 88upx;
				background:url("../../static/img/yibaoming.png");
				background-size: cover;
				text-align:center;
				position:relative;
				margin:36upx 0;
				text{
					line-height: 88upx;
					font-size:34upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(102,102,102,1);
				}
				.right{
					position: absolute;
					right: 20upx;
					font-size:34upx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(102,102,102,1);
				}
			}
			
			.info{
				.info_title{
					margin-left:-12upx;
				}
				text{
					font-size:28upx;
					font-family:PingFang SC;
					color:#333;
				}
			}
		}
		
	}
</style>
